<template>
	<div>
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item> <i class="el-icon-lx-cascades"></i> 系统菜单【仅超管可见】 </el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="container">
			<div class="handle-box">
				<!-- 			   <el-select v-model="query.type" clearable placeholder="类型" class="handle-select mr10">
					<el-option key="0" label="" value="--全部--"></el-option>
					<el-option key="1" label="一级菜单" value="1"></el-option>
					<el-option key="2" label="一级菜单" value="2"></el-option>
					<el-option key="3" label="功能操作" value="3"></el-option>
				</el-select> -->
				<el-input v-model="query.displayName" placeholder="菜单名" class="handle-input mr10" @keyup.enter.native="handleSearch"></el-input>
				<el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
				<el-button type="primary" icon="el-icon-plus" @click="handleEdit()">新增</el-button>
			</div>
			<el-table v-loading="loading" :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header"
			 row-key="id" lazy :load="load" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">

				</el-table-column>
				<el-table-column label="菜单名" prop="displayName">
					<template slot-scope="scope">
						<el-tooltip v-if="scope.row.type==1" :content="scope.row.icon" placement="top">
							<i :class="scope.row.icon"></i>
						</el-tooltip>

						<span style="margin-left: 10px">{{ scope.row.displayName }}</span>
					</template>
				</el-table-column>


				<el-table-column prop="name" label="标识名"></el-table-column>
				<el-table-column label="链接地址">
					<template slot-scope="scope">{{ scope.row.type == 3 ? '功能操作' : scope.row.url }} </template>
					<!-- //<el-tag type="success">功能操作</el-tag> -->
				</el-table-column>
				<el-table-column prop="path" label="页面地址"></el-table-column>
				<el-table-column prop="sort" label="排序(升序)"></el-table-column>

				<el-table-column label="操作" width="180" align="center">
					<template slot-scope="scope">
						<el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
						<el-button type="text" icon="el-icon-delete" class="red" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pagination">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="1" :page-sizes="[10, 15, 20, 30]"
				 :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="40">
				</el-pagination>
			</div>
		</div>

		<!-- 编辑弹出框 -->
		<el-dialog :close-on-click-modal="false" title="编辑内容" :visible.sync="editVisible" width="30%">
			<el-form ref="form" :model="form" label-width="100px" :rules="rulesForm">
				<el-form-item label="菜单名称" prop="displayName">
					<el-input v-model="form.displayName" id="displayName"></el-input>
				</el-form-item>

				<el-form-item label="上级菜单">
					<el-select v-model="form.parentId" clearable filterable placeholder="(可选)" id="parentId" @clear="clearSelect"
					 @change="menuChange">
						<el-option v-bind:style="item.parentId != '' ? 'padding-left:30px;' : ''" v-for="item in selectMenu" :key="item.id"
						 :label="item.displayName" :value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="标识名称" prop="name">
					<el-input v-model="form.name" placeholder="唯一标识 不可重复" id="name"></el-input>
				</el-form-item>
				<el-form-item label="链接地址" prop="url">
					<el-input v-model="form.url" id="url"></el-input>
				</el-form-item>
				<el-form-item label="菜单图标">
					<el-input v-model="form.icon" id="icon"></el-input>
				</el-form-item>
				<el-form-item label="展示顺序" prop="sort">
					<el-input v-model="form.sort" id="sort"></el-input>
				</el-form-item>
				<el-form-item label="备注信息" prop="description">
					<el-input id="description" type="textarea" :rows="3" placeholder="不超过50个字" v-model="form.description"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="resetForm('form')">取 消</el-button>
				<el-button type="primary" @click="saveEdit('form')">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import axios from 'axios';
	export default {
		name: 'meun_list',
		data() {
			var checkName = (rule, value, callback) => {
				if (value.trim().length < 2 || value.trim().length > 40) {
					return callback(new Error('标识名必须在 2 至 40 字符之间!'));
				}
				if (value.substring(value.length - 1) == '.') {
					return callback(new Error('标识名不合法!'));
				}

               
				axios.get(config.gatewayUrl + '/set/menu/checkexist?name=' + value + '&Id=' + this.form.id, {}).then((res) => {
					if (res.data == true) {
						return callback(new Error('该标识名已存在!'));
					}
					else{ 
						callback();
					}
				});

			};

			return {
				query: {
					displayName: '',
					type: -3,
					pageIndex: 1,
					pageSize: 10
				},
				tableData: [],
				selectMenu: [],
				multipleSelection: [],
				delList: [],
				editVisible: false,
				pageTotal: 0,
				form: {},
				loading: false,
				parentId: '',
				editTitle: '新增菜单',
				rulesForm: {
					displayName: [{
							required: true,
							message: '请输入菜单名称!'
						},
						{
							min: 2,
							max: 10,
							message: '长度在 2 到 10 个字符'
						}
					],
					name: [{
						validator: checkName,
						trigger: 'blur'
					}],
					sort: [{
							required: true,
							message: '展示顺序不能为空!'
						},
						{
							type: 'number',
							message: '展示顺序必须是数字!'
						}
					],
					description: [{
						min: 0,
						max: 50,
						message: '长度不能超过50个字符'
					}]
				}
			};
		},
		created() {

			this.loading = true;
			this.getData();
			// axios.post(config.gatewayUrl + '/set/menu/getpage',{type:2},).then((res) => {
			//                       var d=[];
			//                       d=d.concat(res.data,this.selectMenu);
			//                       this.selectMenu=d;
			//    });
		},
		methods: {
			// 触发搜索按钮
			handleSearch() {
				this.$set(this.query, 'pageIndex', 1);
				this.getData();
			},
			getData() {
				this.loading = true;
				axios({
					url: config.gatewayUrl + '/set/menu/getpage',
					method: 'post',
					data: {
						parentId: '',
						displayName: this.query.displayName,
						type: this.query.type
					},
					headers: {
						// 'Content-Type': 'multipart/form-data'
					}
				}).then((res) => {
					var fisrt = res.data.list.filter(function(item) {
						return item.parentId == '';
					});
					var concatArray = [];

					for (var i = 0; i < fisrt.length; i++) {
						concatArray.push(fisrt[i]);
						concatArray = concatArray.concat(
							res.data.list.filter(function(item) {
								return item.parentId == fisrt[i].id;
							})
						);
					}

					this.tableData = concatArray;
					this.selectMenu = concatArray;
					this.pageTotal = res.data.total;
					this.loading = false;
				});
			},
			load(tree, treeNode, resolve) {
				axios
					.post(config.gatewayUrl + '/set/menu/getpage', {
						parentId: tree.id
					})
					.then((res) => {
						if (res.data.total == 0) resolve([]);
						else resolve(res.data.list);
					});
			},
			// 删除操作
			handleDelete(index, row) {
				// 二次确认删除
				var that = this;
				this.$confirm('确定要删除【' + row.displayName + '】吗？', '提示', {
						type: 'warning'
					})
					.then(() => {
						axios.get(config.gatewayUrl + '/set/menu/delete/' + row.id).then((res) => {
							that.getData();
							that.tableData.splice(index, 1);
							that.$message.success('删除成功');
						});
					})
					.catch(() => {});
			},
			// 多选操作
			menuChange(val) {
				var item = this.selectMenu.filter(function(item) {
					return item.id == val;
				});
				this.form.name = item[0].name;
			},

			clearSelect() {
				this.form.name = '';
			},
			// 编辑操作
			handleEdit(index, row) {
				if (row) {
					this.idx = index;
					this.form = row;
					this.parentId = row.parentId;
				} else {
					this.form = {
						id: '',
						name: '',
						displayName: '',
						url: '',
						parentId: '',
						description: '',
						sort: 100,
						type: 1,
						tenantId: ''
					};
					this.parentId = '';
				}

				this.editVisible = true;
			},
			// 保存编辑
			saveEdit(formName) {
				var that = this;
				this.$refs[formName].validate((valid) => {
					if (valid) {
						var dto = this.form;
						var m = that.selectMenu.filter(function(item) {
							return item.id == dto.parentId;
						})[0];


						if (m) {
							dto.type = m.type + 1;
						} else {
							dto.type = 1;
						}

						axios
							.post(config.gatewayUrl + '/set/menu/post', dto)
							.then((res) => {
								that.editVisible = false;
								that.$message.success(`保存成功!`);
								that.getData();
							})
							.catch((error) => {
								console.log(error); //  错误处理 相当于error
							});
					} else {
						return false;
					}
				});
			},
			resetForm(formName) {
				this.form = {
					id: '',
					name: '',
					displayName: '',
					url: '',
					parentId: '',
					description: '',
					sort: 100,
					tenantId: ''
				};
				this.editVisible = false;
				this.$refs[formName].resetFields();
			},
			// 分页导航
			handlePageChange(val) {
				this.$set(this.query, 'pageIndex', val);
				this.getData();
			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
			}
		}
	};
</script>

<style scoped>
	.handle-box {
		margin-bottom: 20px;
	}

	.handle-select {
		width: 120px;
	}

	.handle-input {
		width: 300px;
		display: inline-block;
	}

	.table {
		width: 100%;
		font-size: 14px;
	}

	.red {
		color: #ff0000;
	}

	.mr10 {
		margin-right: 10px;
	}

	.table-td-thumb {
		display: block;
		margin: auto;
		width: 40px;
		height: 40px;
	}
</style>
